import React from 'react';//核心库
import ReactDOM from 'react-dom';//DOM渲染库
/** 
 * 1. 事件处理中的this指针 
 *   1.公共 属性 箭头函数 回调里的this指针 永远指向当前组件的实例
 *   2. 匿名函数
 *   3. bind
 * 
*/
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '计数器', number: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(id, event) {
    this.setState({ number: this.state.number + id });
  }
  //render和生命周期函数里的this 都指向组件实例
  render() {
    return (
      <div>
        <h1>{this.state.name}:{this.state.number}</h1>
        <ul>
          <li onClick={(event) => this.handleClick(1, event)}>1</li>
          <li onClick={(event) => this.handleClick.bind(this, 2)(event)}>2</li>
          <li onClick={(event) => this.handleClick.bind(this, 3)(event)}>3</li>
        </ul>
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));
/*
绑定事件的时候 虚拟DOM JSX绑定和原生DOM不一样
1. 属性名 JSX onClick 原生DOM onclick
2. 值  JSX 函数的指针 函数变量名 原生DOM 字符串
*/